import { Breadcrumb, Button } from 'antd';
import { useState, memo, useEffect } from 'react';
import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
import { RightOutlined } from '@ant-design/icons';
import { DatasetListItem } from '@/common';

interface Props {
  disable: boolean;
  crumbs: ItemType[];
  onItemClicked?: (item: DatasetListItem | undefined) => void;
  selectedItem: any;
}

const BreadCrumb = ({ disable = false, crumbs, onItemClicked, selectedItem }: Props) => {
  const [breadCrumbs, setBreadCrumbs] = useState<ItemType[]>([
    {
      title: '数据接口总览',
      key: -1,
    },
  ]);
  const onClick = (item: any) => {
    onItemClicked && onItemClicked(item);
  };

  console.log('44444444444', selectedItem, crumbs);

  useEffect(() => {
    const items = crumbs?.map((item, index) => {
      return {
        title: (
          // <Button
          //   type="link"
          //   style={{
          //     fontSize: 16,
          //     color: selectedItem && selectedItem.title == item.title ? 'var(--text-5)' : '#86909C',
          //     fontWeight: selectedItem && selectedItem.title == item.title ? '600' : '',
          //     textDecoration: 'none',
          //   }}
          // >
          //   {item.title?.toString()}
          // </Button>

          <div
            className="ml-1 cursor-pointer"
            style={{
              fontSize: 16,
              color: selectedItem && selectedItem.title == item.title ? 'var(--text-5)' : '#86909C',
              fontWeight: selectedItem && selectedItem.title == item.title ? '600' : '',
              textDecoration: 'none',
            }}
          >
            {item.title?.toString()}
          </div>
        ),
        item: item,
        key: index,
      };
    });

    items.unshift({
      title: (
        // <Button
        //   type="link"
        //   style={{
        //     fontSize: 16,
        //     color: selectedItem ? 'var(--text-3)' : 'var(--text-5)',
        //     fontWeight: selectedItem ? '' : '600',
        //     textDecoration: 'none',
        //   }}
        //   onClick={() => {
        //     onClick(undefined);
        //   }}
        // >
        //   数据接口
        // </Button>

        <div
          className=" mr-1 cursor-pointer "
          style={{
            fontSize: 16,
            color: selectedItem ? 'var(--text-3)' : 'var(--text-5)',
            fontWeight: selectedItem ? '' : '600',
            textDecoration: 'none',
          }}
          onClick={() => {
            onClick(undefined);
          }}
        >
          业务办理
        </div>
      ),
      item: {},
      key: -1,
    });

    setBreadCrumbs(items);
  }, [crumbs, selectedItem]);
  return (
    <div className={`bread-crumb flex w-full items-center ${disable ? 'breadcrumb-disabled' : ''}`}>
      <Breadcrumb
        items={breadCrumbs}
        style={{ fontSize: '16px', marginBottom: '5px' }}
        separator={'/'}
      />
    </div>
  );
};

export default memo(BreadCrumb);
